<template>
  <div class="collect">
    <van-nav-bar
      title="收藏夹"
      fixed
      left-text="返回"
      @click-left="back"
    ></van-nav-bar>
    <div class="shopcar-body">
      <van-empty
        description="收藏夹没有东西啦，快到菜单看看吧"
        v-if="mycollects.length === 0"
      >
        <van-button round type="danger" class="bottom-button" @click="gocaidan"
          >去菜单</van-button
        >
      </van-empty>

      <van-swipe-cell
        ref="featuresList"
        :before-close="beforeClose"
        v-for="(value, index) in mycollects"
        v-else
        :key="index"
      >
        <van-cell-group>
          <div class="cell-box" @click="toggles(value)">
            <div class="pro-img">
              <img class="auto-img" :src="value.smallImg" alt />
            </div>
            <div class="pro-info">
              <div class="pro-text fl">
                <div class="ch-name">{{ value.name }}</div>
                <p class="desc">{{ value.desc }}</p>
                <div class="pro-price">
                  ￥{{ value.price }}
                  <div class="plus fr">
                    <div>+</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-cell-group>
        <template #right>
          <van-button
            square
            color="#0b37be"
            @click="letthis(value)"
            text="取消"
          />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import '../assets/less/collect.less'
import { findAllLikeAPI, notlikeAPI } from '@/api/user'
import { getToken } from '@/utils/storage'

export default {
  data () {
    return {
      isSwipeOpen: false,
      pid: '',
      mycollects: []
    }
  },
  created () {
    this.eachcollect()
  },
  methods: {
    //   返回上一级
    back () {
      this.$router.go(-1)
    },
    // 查询收藏夹
    eachcollect () {
      const tokenString = getToken()
      if (!tokenString) return this.$router.push({ name: 'Login' })
      findAllLikeAPI({ appkey: this.$store.state.appkey, tokenString }).then(
        res => {
          // 处理收藏商品
          if (res.code === 2000) {
            for (let i = 0; i < res.result.length; i++) {
              res.result[i].ischeak = false
            }
            this.mycollects = res.result
          }
        }
      )
    },
    // 获取点击的取消收藏的的pid
    letthis (value) {
      this.pid = value.pid
    },
    // 确定取消收藏
    beforeClose ({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          Dialog.confirm({
            message: '确定取消收藏吗？'
          }).then(() => {
            instance.close()
            this.remove() // 确定取消收藏
          })
          break
      }
    },
    // 取消收藏方法
    remove () {
      const tokenString = getToken()
      if (!tokenString) return this.$router.push({ name: 'Login' })
      notlikeAPI({
        appkey: this.$store.state.appkey,
        pid: this.pid,
        tokenString
      }).then(res => {
        if (res.code === 900) {
          this.eachcollect() // 取消收藏成功后重新渲染页面
        }
      })
    },
    // 点击商品进入详情
    toggles (value) {
      const pid = value.pid
      this.$router.push({ name: 'Detail', query: { pid } })
    },
    // 去菜单
    gocaidan () {
      this.$router.push({ name: 'Caidan' })
    }
  }
}
</script>

<style lang="less" scoped></style>
